<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script>
        $(function () {
            //index()	获取组件索引
            var i = $("div").index($("#div3"));
            console.log("index:" + i);


            //data()	获取 data-[test]的属性值
            var val = $("#div3").data("test");
            console.log(val);

            //data("","")	为组件添加 data-[hehe(key)]="呵呵(value)" 的属性
            $("#div2").data("hehe", "呵呵");
            val = $("#div2").data("hehe");
            console.log(val);

            //get(index)	获取匹配的组件
            i = $("div").get($("div").index($("#div3")));
            console.log(i);

        });

        var btnClick = function () {
            $("#div_toggle").toggle("slow", function () {//切换完成后调用方法
                console.log("this is a toggle test! haha !");
            });
        }

        //resize()
        $(window).resize(function () {
            //alert("Stop it!");
            console.log("resizing window");
        });
    </script>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3" data-test="hello world">
        <div id="div3_1"></div>
        <div id="div3_2"></div>
        <div id="div3_3"></div>
    </div>
    <div id="div4"></div>
</div>
<button onclick="btnClick()">click</button>
<div id="div_toggle" style="width:100px;height:100px;background-color: gray;"></div>
</body>
</html>